<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter关键字query')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                        <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table
                :columns="columns" 
                :dataSource="tableData" 
                :loading="tableLoading"
                row-key="f_Id"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                >
                <template v-slot:f_BeginTime="scope" >
                    {{lr_dateFormat(scope.row.f_BeginTime,'yyyy-MM-dd hh:mm:ss')}}
                </template>
                <template v-slot:f_EndTime="scope" >
                    {{lr_dateFormat(scope.row.f_EndTime,'yyyy-MM-dd hh:mm:ss')}}
                </template>
                <template v-slot:f_IsActive="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="2"
                        v-model="scope.row.f_IsActive"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"

            :isStep="true"
            :steps="['基础信息','任务配置']"
            :stepActive.sync="stepActive"
            :validateSteps="handleValidateSteps"

            :width="700"
            :height="610"

            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" :stepActive="stepActive"></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.quartz.scheme
import MyForm from './form'
export default {
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,

            // 表格
            columns: [
                {label:'名称',prop:'f_Name',minWidth:'200'},
                {label:'状态',prop:'f_IsActive',width:'64',align:'center'},
                {label:'开始时间',prop:'f_BeginTime',width:'160'},
                {label:'结束时间',prop:'f_EndTime',width:'160'}
            ],
            tableBtns:[
                {prop:'Edit',label:this.$t('Edit'),width:40},
                {prop:'Delete',label:this.$t('Delete'),width:40}
            ],
            tableData:[],
            tableLoading:false,
            searchWord:'',
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,

            stepActive:0,
            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false
        }
    },
    mounted(){
        this.loadTableData()
    },
    computed:{
    },
    methods:{
        loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_BeginTime DESC',
                keyword:this.searchWord
            }

            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                this.tableData = data.rows
                this.tableTotal = data.records
                this.tableLoading = false
            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        hanleSearch(){
            this.loadTableData()
        },
        handleEnableChange(row){
            if(row.f_IsActive == 2){
                api.pauseJob(row.f_Id).then(()=>{
                    this.$message({
                        type: 'success',
                        message: this.$t('暂停成功!')
                    })
                })
            }
            else{
                api.resumeJob(row.f_Id).then(()=>{
                    this.$message({
                        type: 'success',
                        message: this.$t('启动成功!')
                    })
                })
            }
        },
        // 表单部分
        handleAdd(){
            this.formEdit = false;
            this.showForm('Add任务计划');
        },
        handleEdit($index,row){
            this.formEdit = true;
            this.formEditRow = row;
            this.showForm('Edit任务计划');
        },
        handleDelete($index,row){
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(() => {
                api.remove(row.f_Id).then(()=> {
                    this.$message({
                        type: 'success',
                        message: this.$t('Delete  success')
                    })
                    this.loadTableData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled')
                })         
            })
        },
        async handleSave(showLoading,hideLoading){
            showLoading()
            if(!await this.$refs.form.validateForm()){
                hideLoading()
                return
            }
            const formData = this.$refs.form.getForm()
            if(this.formEdit){
                const res1 = await this.$awaitWraper(api.update(this.formEditRow.f_Id,formData))
                if(res1){
                    this.$message({
                        type: 'success',
                        message: this.$t('更新成功!')
                    })
                    this.formVisible = false
                    this.loadTableData()
                }
            }
            else{
                const res2 = await this.$awaitWraper(api.add(formData))
                if(res2){
                    this.$message({
                        type: 'success',
                        message: this.$t('Add成功!')
                    })
                    this.formVisible = false
                    this.loadTableData()
                }
            }
            hideLoading()
        },
        async handleOpenedForm(showLoading,hideLoading){
            if(this.formEdit){
                showLoading('Loading data...')
                const data = await  this.$awaitWraper(api.get(this.formEditRow.f_Id))
                this.$refs.form.setForm(data)
                hideLoading() 
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        },

        async handleValidateSteps(){
            return await this.$refs.form.validateStep()
        }

    }
}
</script>